<template>
  <div class="order-detail">
    <!-- 订单基本信息 -->
    <el-descriptions title="订单基本信息" column="1" border>
      <el-descriptions-item label="订单编号">{{ order.orderId }}</el-descriptions-item>
      <el-descriptions-item label="下单时间">{{ formatDate(order.createTime) }}</el-descriptions-item>
      <el-descriptions-item label="订单状态">
        <el-tag :type="getStatusType(order.orderStatus)">{{ getStatusText(order.orderStatus) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="支付方式">{{ order.paymentMethod || '未选择' }}</el-descriptions-item>
    </el-descriptions>

    <!-- 买卖双方信息 -->
    <el-descriptions title="买卖双方信息" column="2" border style="margin-top: 15px;">
      <el-descriptions-item label="买方ID">{{ order.buyerId }}</el-descriptions-item>
      <el-descriptions-item label="卖方ID">{{ order.sellerId }}</el-descriptions-item>
      <el-descriptions-item label="卖方联系人">{{ order.equipment.contactName }}</el-descriptions-item>
      <el-descriptions-item label="卖方电话">{{ order.equipment.contactPhone }}</el-descriptions-item>
    </el-descriptions>

    <!-- 设备信息 -->
    <el-descriptions title="设备信息" column="1" border style="margin-top: 15px;">
      <el-descriptions-item label="设备图片">
        <div class="equipment-images">
          <el-image 
            v-for="img in order.equipment.equipmentImages" 
            :key="img.imageId"
            :src="img.imageUrl" 
            :preview-src-list="getAllImageUrls()"
            class="preview-img"
            fit="cover"
          />
          <el-image 
            v-if="order.equipment.equipmentImages.length === 0"
            src="https://picsum.photos/seed/default/200/200" 
            class="preview-img"
            fit="cover"
          />
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="设备名称">{{ order.equipment.brand }} {{ order.equipment.model }}</el-descriptions-item>
      <el-descriptions-item label="设备ID">{{ order.equipmentId }}</el-descriptions-item>
      <el-descriptions-item label="基本参数">
        <div class="params-grid">
          <div class="param-item">年份: {{ order.equipment.year }}</div>
          <div class="param-item">小时数: {{ order.equipment.hour }}h</div>
          <div class="param-item">价格: ¥{{ order.equipment.price.toFixed(2) }}</div>
          <div class="param-item">排放标准: {{ order.equipment.emissionStandard }}</div>
          <div class="param-item">所在地: {{ order.equipment.location }}</div>
          <div class="param-item">类型ID: {{ order.equipment.typeId }}</div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="设备描述">{{ order.equipment.description || '无' }}</el-descriptions-item>
      <el-descriptions-item label="检测状态">
        <el-tag :type="order.equipment.isDetected ? 'success' : 'info'">
          {{ order.equipment.isDetected ? '已检测' : '未检测' }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 支付信息 -->
    <el-descriptions title="支付信息" column="2" border style="margin-top: 15px;">
      <el-descriptions-item label="订单总金额">¥{{ order.orderAmount.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="定金金额">¥{{ order.depositAmount.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="尾款金额">¥{{ order.balanceAmount.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="定金支付时间">{{ formatDate(order.depositPayTime) || '未支付' }}</el-descriptions-item>
      <el-descriptions-item label="尾款支付时间">{{ formatDate(order.balancePayTime) || '未支付' }}</el-descriptions-item>
    </el-descriptions>

    <!-- 物流信息 -->
    <el-descriptions title="物流信息" column="2" border style="margin-top: 15px;">
      <el-descriptions-item label="物流公司">{{ order.logisticsCompany || '未发货' }}</el-descriptions-item>
      <el-descriptions-item label="物流单号">{{ order.logisticsNo || '未发货' }}</el-descriptions-item>
      <el-descriptions-item label="收货时间">{{ formatDate(order.receiptTime) || '未收货' }}</el-descriptions-item>
      <el-descriptions-item label="评价时间">{{ formatDate(order.evaluationTime) || '未评价' }}</el-descriptions-item>
    </el-descriptions>

    <!-- 交易进度 -->
    <div class="process-timeline" style="margin-top: 20px;">
      <h3>交易进度</h3>
      <el-timeline>
        <el-timeline-item 
          :timestamp="formatDate(order.createTime)"
          placement="top"
        >
          订单创建
        </el-timeline-item>
        
        <el-timeline-item 
          :timestamp="order.depositPayTime ? formatDate(order.depositPayTime) : '待支付'"
          :status="order.orderStatus >= 1 ? 'success' : 'wait'"
          placement="top"
        >
          支付定金
        </el-timeline-item>
        
        <el-timeline-item 
          :timestamp="order.balancePayTime ? formatDate(order.balancePayTime) : (order.orderStatus >= 2 ? '待支付' : '未到支付时间')"
          :status="order.orderStatus >= 3 ? 'success' : (order.orderStatus >= 2 ? 'wait' : 'process')"
          placement="top"
        >
          支付尾款
        </el-timeline-item>
        
        <el-timeline-item 
          :timestamp="order.logisticsNo ? '已发货' : (order.orderStatus >= 3 ? '待发货' : '未到发货时间')"
          :status="order.orderStatus >= 4 ? 'success' : (order.orderStatus >= 3 ? 'wait' : 'process')"
          placement="top"
        >
          商家发货
        </el-timeline-item>
        
        <el-timeline-item 
          :timestamp="order.receiptTime ? formatDate(order.receiptTime) : (order.orderStatus >= 4 ? '待收货' : '未到收货时间')"
          :status="order.orderStatus >= 5 ? 'success' : (order.orderStatus >= 4 ? 'wait' : 'process')"
          placement="top"
        >
          确认收货
        </el-timeline-item>
        
        <el-timeline-item 
          :timestamp="order.evaluationTime ? formatDate(order.evaluationTime) : (order.orderStatus >= 5 ? '待评价' : '未到评价时间')"
          :status="order.orderStatus >= 6 ? 'success' : (order.orderStatus >= 5 ? 'wait' : 'process')"
          placement="top"
        >
          完成交易并评价
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 接收订单数据
const props = defineProps({
  order: {
    type: Object,
    required: true,
  },
});

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待支付定金',
    1: '已支付定金',
    2: '待支付尾款',
    3: '已支付尾款',
    4: '已发货',
    5: '已收货',
    6: '已完成',
    7: '已取消',
  };
  return statusMap[status] || '未知状态';
};

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'info',
    2: 'warning',
    3: 'success',
    4: 'primary',
    5: 'primary',
    6: 'success',
    7: 'danger',
  };
  return typeMap[status] || 'default';
};

// 获取所有设备图片URL（用于预览）
const getAllImageUrls = () => {
  if (props.order.equipment && props.order.equipment.equipmentImages) {
    return props.order.equipment.equipmentImages.map(img => img.imageUrl);
  }
  return [];
};
</script>

<style scoped>
.process-timeline {
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.process-timeline h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
}

.equipment-images {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.preview-img {
  width: 100px;
  height: 100px;
  cursor: pointer;
  border-radius: 4px;
}

.params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 10px 0;
}

.param-item {
  color: #606266;
}
</style>